<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Home</title>
<link href="../../css/cloud-admin.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../../css/iotxstyle.css" rel="stylesheet" type="text/css" media="all" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="../../js/jquery-2.0.3.min.js"></script>
<script src="../../js/responsiveslides.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="../../js/move-top.js"></script>
<script type="text/javascript" src="../../js/easing.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jquery.progress.js"></script>
<style>
	.nav > li {
		position: relative;
		display: block;
		margin-left: 30px;
		border: 0px;
	}
	.form-control{
		margin-top:10%;width: 120%;height: 80%;font-size: 18px
	}
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
		color: #262626;
		text-decoration: none;
		background-color: #f5f5f5;
	}
	div.bg_con{
		float: right;
		margin-right: 38%;
		width: 3.7%;
		height: 50%;
	}
	div.bg_con input.theHelper{
		display:none;
	}
	div.bg_con label{
		position:relative;
		display: block;
		padding: 1px;
		border-radius: 24px;
		height: 22px;
		background-color: #eee;
		cursor: pointer;
		vertical-align: top;
		-webkit-user-select: none;
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:before{
		content: '';
		display: block;
		border-radius: 24px;
		height: 22px;
		background-color: orange;
		-webkit-transform: scale(1, 1);
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		margin-left: -11px;
		display: block;
		border-radius: 100%;
		background-color: white;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
		-webkit-transform: translateX(-9px);
		-webkit-transition: all 0.3s ease;
	}
	input.theHelper:checked~label:after{
		-webkit-transform: translateX(9px);
	}
	input.theHelper:checked~label:before{
		background-color:#4cda64;
	}
	a:hover, a:focus {
		color: #60A1E5;
		text-decoration: underline;
	}
</style>
</head>
<body>
<!--navbar -->
	<div class="all-navbar">
	   <nav class="navbar navbar-default">
			   <div class="navbar-header">
				   <div class="navbar-brand">
					   <h1><a href="index.html">iotx</a></h1>
				   </div>
			   </div>
				   <ul class="nav navbar-nav">
					   <li >
						   <a href="#" id="system" style="border: 0px">System <span class="sr-only"></span></a>
					   </li>
					   <li ><a href="#" id="network">Network</a></li>
					   <li><a href="#" id="sensors">Sensors</a></li>
					   <li class="dropdown">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Files<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datafile">Data  File</a></li>
							   <li><a href="#" id="settingfile">Setting  File</a></li>
						   </ul>
					   </li>
					   <li class="dropdown" class="active">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tools<span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu">
							   <li><a href="#" id="datarecovery">Data  Recovery</a></li>
							   <li><a href="#" id="settingguide">Setup Wizard</a></li>
						   </ul>
					   </li>
					   <li><a href="#" id="logout">Logout</a></li>
					   <li>
						   <button class="apply-button" style="margin-left: 40%">
							   Apply&Save
						   </button>
					   </li>
					   <li>
						   <button class="apply-button">
							   Upload
						   </button>
					   </li>
				   </ul>
	   </nav>
	</div>
<!--navbar -->
	<section>
		<div class="systemInfo">
			<div class="system-title" >
				Files
				<div class="second-title">
					>  Configuration Files
				</div>
			</div>
			<div class="user-title" >
				Files
			</div>
			<div class="tabbable" style="width: 100%;height: 40%;">
				<ul class="nav nav-tabs" style="margin-top: 1%;width: 60%;float: left">
					<li class="active" style="width: 38%;font-size: 20px;margin-left: 1px"><a href="#tab_1_1" data-toggle="tab" id="raw-data"><i class="fa fa-home"></i>IOT-X Configuration Files</a></li>
					<li style="width: 38%;font-size: 20px;margin-left: 1px"><a href="#tab_1_2" data-toggle="tab" id="back-data"><i class="fa fa-envelope"></i>Dust Configuration Files</a></li>
				</ul>
				<div class="data-select" style="display:none">
					<input placeholder="Start" style="margin-top:1%;margin-right:0%;margin-left:30%;width: 30%;height: 80%;float: left" type="text" class="form-control" value="" />
					<input placeholder="End" style="margin-top:1%;margin-right:5%;width: 30%;height: 80%;float: right" type="text" class="form-control" value="" />
				</div>
				<div class="tab-content" style="width: 100%;height: 100%;padding-top: 6%">
					<div class="tab-pane fade in active" id="tab_1_1" style="width: 100%;height: 100%;">
						<div class="data-header">
							<div class="header1">
								File Name
							</div>
							<div class="header2">
								Create Time
							</div>
							<div class="header3">
								Sizes
							</div>
							<div class="header4">
								Actions
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1" >
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1">
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1">
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="tab_1_2" style="width: 100%;height: 100%;">
						<div class="data-header">
							<div class="header1">
								File Name
							</div>
							<div class="header2">
								Create Time
							</div>
							<div class="header3">
								Sizes
							</div>
							<div class="header4">
								Actions
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1">
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1">
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>
						<div class="data-list" onmousemove="this.className='data-list-on'" onmouseout="this.className='data-list'">
							<div class="header1">
								<img src="../../img/data-img.png"style="margin-top: 3%;float: left">
								<div class="file-name">
									<div class="file-name-sn">
										S000001
									</div>
									<div class="file-name-name">
										Test1
									</div>
								</div>
							</div>
							<div class="header2" style="padding-top: 2%">
								2017-10-08 08:11:30
							</div>
							<div class="header3" style="padding-top: 2%">
								516kb
							</div>
							<div class="header4" style="padding-top: 2%">
								<button>
									Download
								</button>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>

	</section>

<script>
    $(document).ready(function(){
        $('#system').click(function(){
            window.location.href='../../index.html';
        });
        $('#network').click(function(){
            window.location.href='../network/network.html';
        });
        $('#sensors').click(function(){
            window.location.href='../sensors/sensors.html';
        });
        $('#datafile').click(function(){
            window.location.href='../data/datafile.html';
        });
        $('#datarecovery').click(function(){
            window.location.href='../data/datarecovery.html';
        });
        $('#settingguide').click(function(){
            window.location.href='../guide/guide.html';
        });
        $('#logout').click(function(){
            window.location.href='../../login.html';
        });





    });
</script>

</body>
</html>